<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="root_layer">
	<p style="background-color:skyblue">1번 라인</p>
	<p style="background-color:red">2번 라인</p>
	<p style="background-color:green">3번 라인</p>
	<p style="background-color:cyan">4번 라인</p>
</div>
<input type="button" value="appendChild - 추가" onclick="appendChildTest()">
<input type="button" value="insertBefore- 삽입" onclick="insertBeforeTest()">
<input type="button" value="deleteAll - 모두 삭제" onclick="removeChildTest()">
<input type="text" id="deleteIndex" value="삭제할 노드의 index를 적으세요" onfocus="this.value='';">
<input type="button" value="특정 인덱스 P 삭제" onclick="deletePNode()">
<script type="text/javascript" charset="utf-8">
	var cnt = 0;//전역변수
	
	var cnt1 = 0;
	
	function deletePNode () {
		//사용자가 입력한 숫자를 변수로 받아서 그 변수를 받아 차일드를 삭제 
	  var delIndex = document.getElementById("deleteIndex").value;
	  if(window.isNaN(delIndex)){
	  	alert("index는 숫자만 넣으세요");
	  	return;
	  }
	  var root = document.getElementById("root_layer");
	  root.removeChild(root.children[delIndex-1]);
	}
	
	
	
	function removeChildTest () {
		var root = document.getElementById("root_layer");
		while(root.hasChildNodes()){//자식 노드들이 있는 동안 
			root.removeChild(root.firstChild);//첫번째 자식 노드를 삭제하라
		}  
	}
	
	
	
	
	function insertBeforeTest () {
	  //<p style="background-color:purple;color:white>삽입될 라인 count</p>"
	  
	  var newP = document.createElement("p");
	  newP.setAttribute("style", "background-color:purple", "color:white");
	  var txt = document.createTextNode("삽입될 라인 - "+ cnt1++);
	  newP.appendChild(txt);
	//  document.getElementById("root_layer").insertBefore(newP, document.getElementById("root_layer").firstChild);
	//위는 첫번째 자식 앞에다가 인서트하는 거라면 아래는 특정 인덱스를 지정해주는 것도 가능하다.
	  document.getElementById("root_layer").insertBefore(newP, document.getElementById("root_layer").children[2]);
	}
	
	function appendChildTest () {
	  var newP = document.createElement("p");
	  newP.setAttribute("style", "background-color:red");
	  //새로운 라인
	  var txt = document.createTextNode("새로운 라인 - "+ cnt++);
	 //<p>새로운 라인</p>
	 newP.appendChild(txt);//<p>새로운 라인</p>
	 
	 document.getElementById("root_layer").appendChild(newP); 
	}
</script>
</body>
</html>